<!--
 * @Author: daidai
 * @Date: 2022-03-01 14:13:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:04:49
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
-->
<template>
  <div>
    <div ref="chart" style="width: 100%; height:250px;"></div>
  </div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';

export default {
  props: ['parentData'],
  data() {
    return {
      option: {},
      pageflag: false,
      timer: null,
      // hostIP: "localhost",
      hostIP: "116.54.4.93",
    };
  },
  created() {
   
  },
  watch: {
    parentData(newVal) {
      console.log('片区客户分析-子组件的数据已更新:', newVal);
      this.getData();
    },
  },
  mounted() {
     this.getData();
  },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      console.log("--------片区客户分析-------",this.parentData)
      this.pageflag = true;
      if(this.parentData=="云南上云丰花卉有限公司"||this.parentData=="电商"||this.parentData=="洋丽人"||this.parentData=="何文丽"||this.parentData=="销售部"){
        let surl = "http://"+this.hostIP+":9500/api/bigscreen/getAreaCustomerSummary";
        axios.get(surl,{ withCredentials: true }) // 使用 params 参数传递查询参数
          .then(res => {
            const chart = echarts.init(this.$refs.chart);
            chart.clear();
            const option = {
              tooltip: {
                trigger: 'item',
                formatter: function (params) {
                  return params.data.extraInfo
                }
              },
              legend: {
                orient: 'vertical',
                left: 'left',
                textStyle: {
                  color: 'orange' // 全局字体颜色
                }
              },
              // toolbox: {
              //   show: true,
              //   orient: 'vertical',
              //   left: 'right',
              //   top: 'top',
              //   feature: {
              //     dataView: { show: true, readOnly: false },
              //     saveAsImage: { show: true }
              //   }
              // },
              series: [
                {
                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 1
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: 14,
                      textStyle: {
                        color: 'aqua' // 全局字体颜色
                      }
                    }
                  },
                  label: {
                    show: true,
                    formatter: '{b}: {c}',
                    textStyle: {
                      color: 'aqua', // 设置数据标签的字体颜色为红色
                      fontSize: 12,    // 设置字体大小
                    }
                  },
                  labelLine: {
                    show: true
                  },
                  data: res.data.map(item => ({
                    value: item.amount,
                    name: item.area,
                    labelInfo: "片区："+item.area+"<br/>客户总数: "+item.amount,
                    extraInfo: "片区："+item.area+"<br/>客户总数: "+item.amount+"<br/>省内客户数："+item.snamount+"<br />省外客户数: "+item.swamount+"<br />电商客户数: "+item.dsamount+"<br/>潜在客户数："+item.qzamount,
                  })),
                }
              ]
            };
            chart.setOption(option);
            // this.switper();
          });
      }else {
        let surl = "http://"+this.hostIP+":9500/api/bigscreen/getAreaCustomerStat?area="+this.parentData;
        axios.get(surl,{ withCredentials: true }) // 使用 params 参数传递查询参数
          .then(res => {
            const chart = echarts.init(this.$refs.chart);
            chart.clear();
            const option = {
              tooltip: {
                trigger: 'item',
                formatter: function (params) {
                  return params.data.extraInfo
                }
              },
              // legend: {
              //   orient: 'vertical',
              //   left: 'left',
              //   textStyle: {
              //     color: 'orange' // 全局字体颜色
              //   }
              // },
              series: [
                {
                  type: 'pie',
                  radius: ['50%', '80%'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 1
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: 14,
                      textStyle: {
                        color: 'aqua' // 全局字体颜色
                      }
                    }
                  },
                  label: {
                    show: true,
                    formatter: '{b}: {c}',
                    textStyle: {
                      color: 'aqua', // 设置数据标签的字体颜色为红色
                      fontSize: 12,    // 设置字体大小
                    }
                  },
                  labelLine: {
                    show: true
                  },
                  data: res.data.map(item => ({
                    value: item.amount,
                    name: item.district,
                    labelInfo: "乡镇街道："+item.district+"<br/>客户总数: "+item.amount,
                    extraInfo: "乡镇街道："+item.district+"<br/>客户总数: "+item.amount,
                  })),
                }
              ]
            };
            chart.setOption(option);
            // this.switper();
          });
      }
    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
    },
    
  },
};
</script>
<style lang='scss' scoped>
.right_top_inner {
  margin-top: -8px;
}
</style>